import React, { useState, useEffect, useRef } from 'react';
import style from './../ServiceTeamCss/DataTemplate.module.css'
import { Col, Row, Button, Input, Select, Pagination, Modal, Table } from 'antd'
import { useSelector, useDispatch } from 'react-redux';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
const { Option } = Select
const { confirm } = Modal;



const DataTemplate = () => {
    
    const datacolumns = useSelector(state => state.datacolumns);
    const ddata = useSelector(state => state.ddata);
    const dpage = useSelector(state => state.dpage);
    const dpagesize = useSelector(state => state.dpagesize);

    return (
        <div>
            <div className={style.titel}>
                丨 资料模板
            </div>
            <hr></hr>
            <Row className={style.serch}>
                <Col span={6}>资料模板名称<Input className={style.input} 
                 /></Col>
                <Col span={6}>状态 <Select className={style.input} placeholder="--请选择--" >
                    <Option value="启用" >启用</Option>
                    <Option value="禁用">禁用</Option>
                </Select></Col>
                <Col span={6}>文件类型 <Select className={style.input} placeholder="--请选择--">
                    <Option value="服务团队">内部文件</Option>
                    <Option value="产品研发中心">外部文件</Option>
                </Select></Col>
                
                <Col span={4}><Button className={style.button} type="primary" >查询</Button></Col>
            </Row>

            <Row>
                <Col span={14}></Col>
                <Col span={10}>
                    <Row className={style.a}>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} 
                        >新增</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} >编辑</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} >启用</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} 

                        >禁用</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} >删除</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn}>导出</Button></Col>
                    </Row>






                </Col>
            </Row>
            <Table
                rowSelection={{
                    type: "checkbox",
                    onChange: (selectedRowKeys, selectedRows, info) => {
                        console.log(selectedRows);
                      


                    }
                }}
                columns={datacolumns}
                dataSource={ddata}
                pagination={{
                    pageSize: 5,

                }}
                
            
                
            />
        </div>
    );
}

export default DataTemplate;
